﻿@{
    ViewData["Title"] = "产品编辑";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
    var id = ViewData["id"] as int?;
}
@section css{
    <style>
        .layui-form-item .layui-inline {
            margin-bottom: 15px !important;
        }
        /*图片相册样式*/
        .photo-list {
            margin: 0;
        }

            .photo-list ul {
                margin: 0 0 0 -15px;
            }

                .photo-list ul li {
                    float: left;
                    margin-right: 15px;
                    text-align: center;
                    *width: 118px;
                }

                    .photo-list ul li .img-box {
                        position: relative;
                        margin: 5px auto;
                        width: 112px;
                        height: 112px;
                        border: 3px #efefed solid;
                        cursor: pointer;
                        overflow: hidden;
                    }

                        .photo-list ul li .img-box.selected {
                            border: 3px #f60 solid;
                        }

                        .photo-list ul li .img-box img {
                            width: 100%;
                            height: 100%;
                            opacity: 1;
                        }

                        .photo-list ul li .img-box .remark {
                            position: absolute;
                            display: block;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: 0;
                            padding: 3px 2px;
                            height: 18px;
                            line-height: 18px;
                            background: #000;
                            filter: alpha(opacity=50);
                            opacity: 0.5;
                            -moz-opacity: 0.5;
                            text-align: left;
                            overflow: hidden;
                        }

                            .photo-list ul li .img-box .remark:hover {
                                top: 0;
                                bottom: 0;
                                height: 100%;
                            }

                            .photo-list ul li .img-box .remark i {
                                position: relative;
                                font-size: 12px;
                                color: #fff;
                                font-style: normal;
                                line-height: 18px;
                            }

                    .photo-list ul li a {
                        padding-right: 1em;
                    }
    </style>
}
<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
    <input name="id" type="hidden" value="@id" />
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header">产品信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">所在栏目:</label>
                        <div class="layui-input-block">
                            <input type="text" id="classTree" name="classTree" lay-filter="classTree" class="layui-input" readonly="readonly">
                        </div>
                    </div>
                    <input type="hidden" id="classId" name="classId">
                    <input type="hidden" id="languageId" name="languageId">
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label">产品图片:</label>
                        <div class="layui-input-block">
                            <div>
                                <button class="layui-btn layui-btn-sm layui-btn-normal icon-btn webuploader-pick" type="button">
                                    <i class="layui-icon"></i>上传图片
                                </button>
                            </div>
                            <input name="defaultImg" type="hidden" id="defaultImg" class="focus-photo" lay-vertype="tips" lay-reqText="请上传产品图片" value="">
                            <div class="photo-list">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">产品名称:</label>
                        <div class="layui-input-block">
                            <input name="proName" placeholder="请输入产品名称" class="layui-input"
                                   lay-verType="tips" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">产品编号:</label>
                        <div class="layui-input-block">
                            <input name="proNo" placeholder="请输入产品编号" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">Cas号:</label>
                        <div class="layui-input-block">
                            <input name="casNo" placeholder="请输入Cas" class="layui-input"
                                   lay-verType="tips" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">SeoKeywords:</label>
                        <div class="layui-input-block">
                            <input name="seoKeywords" placeholder="请输入SeoKeywords" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">Seo描述:</label>
                        <div class="layui-input-block">
                            <input name="seoDescription" placeholder="请输入Seo描述" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">排序:</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" placeholder="请输入排序" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">分子式:</label>
                        <div class="layui-input-block">
                            <input name="molecularFormula" placeholder="请输入分子式" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">分子量:</label>
                        <div class="layui-input-block">
                            <input name="molecularweight" placeholder="请输入分子量" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">纯度:</label>
                        <div class="layui-input-block">
                            <input name="purity" placeholder="请输入纯度" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">熔点:</label>
                        <div class="layui-input-block">
                            <input name="meltingpoint" placeholder="请输入熔点" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">包装:</label>
                        <div class="layui-input-block">
                            <input name="packaging" placeholder="请输入包装" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">外观:</label>
                        <div class="layui-input-block">
                            <input name="appearance" placeholder="请输入外观" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">生产能力:</label>
                        <div class="layui-input-block">
                            <input name="productionCapacity" placeholder="请输入生产能力" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">产品用途:</label>
                        <div class="layui-input-block">
                            <input name="productuse" placeholder="请输入产品用途" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">交货时间:</label>
                        <div class="layui-input-block">
                            <input name="deliveryTime" placeholder="请输入交货时间" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">是否推荐(推荐产品会在首页展示):</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="isShowCheck" lay-skin="switch" lay-text="是|否">
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">产品详情</div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md12">
                    <label class="layui-form-label layui-form-required">产品详情:</label>
                    <div class="layui-input-block">
                        <textarea id="description" name="description" placeholder="请输入产品详情" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group-bottom text-right">
        <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
        <a class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;保存&emsp;</a>
    </div>

</form>
<script type="text/html" id="addimg">
    <li>
        <input type="hidden" name="img" data-id="0" value="{{d.src}}">
        <input type="hidden" name="isTitle" data-id="0" value="0">
        <div class="img-box">
            <img src="{{d.src}}" class="tdImg" tb-img="">
        </div>
        <a href="javascript:;" class="setTitleImg">设为标题图片</a>
        <a href="javascript:;" class="delImg">删除</a>
    </li>
</script>
<script type="text/html" id="loadProduct">
    {{# if(d.length>0){}}
    {{# layui.jquery(d).each(function(index,item){}}
    <li>
        <input type="hidden" name="img" data-id="{{item.id}}" data-name="img" value="{{item.img}}">
        <input type="hidden" name="isTitle" data-id="{{item.id}}" data-name="isTitle" value="{{item.isTitle}}">
        <div class="img-box {{item.isTitle==1 ? "selected":""}}">
            <img src="{{item.img}}" class="tdImg" tb-img="">
            {{# if(item.isTitle==1){}}
            <span class="remark"><i>标题图片</i></span>
            {{# } }}
        </div>
        <a href="javascript:;" class="setTitleImg">设为标题图片</a>
        <a href="javascript:;" class="delImg">删除</a>
    </li>
    {{# }); }}
    {{# } }}
</script>
<script type="text/javascript">
    layui.use(['admin', 'layer', 'form', 'table', 'laydate', 'upload', 'CKEDITOR', 'treeSelect','laytpl'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var CKEDITOR = layui.CKEDITOR;
        var Id = $("[name=id]").val();
        var treeSelect = layui.treeSelect;
        var laytpl = layui.laytpl;
        var upload = layui.upload;
        var index2 = parent.layer.getFrameIndex(window.name);
        CKEDITOR.replace('description', { height: 480 });
        var insEdt = CKEDITOR.instances.description;
        treeSelect.render({
            elem: '#classTree',// 选择器
            data: '/api/ContentClass/GetContentTreeList',// 数据接口
            placeholder: '请选择上级类型', // 数据
            search: false,// 是否开启搜索功能：true/false，默认false
            style: { // 一些可定制的样式
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            click: function (d) {
                if (d.current.isLanguage) {
                    $("#classId").val(0);
                } else {
                    $("#classId").val(d.current.id);
                }
                $("#languageId").val(d.current.languageId);
            },
            success: function (d) {
                //加载完成后的回调函数
                if (Id != "0") {
                    LoadProduct();
                }
            }
        });


        /* 监听表单提交 */
        form.on('submit(formAdvSubmit)', function (data) {
            var FromData = data.field;
            const description = insEdt.getData();
            var field = Object.assign(FromData, { description: description });
            var url = Id == "0" ? "/api/product" : "/api/product/" + field.id;
            var typestr = Id == "0" ? "post" : "put";
            var imgs = [];
            $(".photo-list ul li").each(function (index, item) {
                var id = $(item).find("[name=img]").attr("data-id");
                var img = $(item).find("[name=img]").val();
                var isTitle = $(item).find("[name=isTitle]").val();
                var proId = Id;
                imgs.push({
                    id: id,
                    img: img,
                    isTitle: isTitle,
                    proId: proId
                });
            });
            field.productImgs = imgs;
            if (field.isShowCheck) {
                if (field.isShowCheck == "on") {
                    field.isShow = 1;
                } else {
                    field.isShow = 0;
                }
            } else {
                field.isShow = 0;
            }
            layer.confirm('确认要保存吗?', { btn: ['确定', '取消'] }
                , function (index) {
                    layer.load(2);
                    $.ajax({
                        url: url,
                        type: typestr,
                        data: JSON.stringify(field),
                        contentType: "application/json",
                        dataType: "json",
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.message, { icon: 1, time: 1200 }, function () {
                                    if (Id != "0") {
                                        window.location.reload();
                                    } else {
                                        window.location.href = "/manage/ProductEdit?id=" + result.data;
                                    }
                                });
                            } else {
                                layer.msg(result.message, { icon: 2 });
                            }
                        }
                    });
                });
        });

        //加载信息
        function LoadProduct() {
            $.ajax({
                url: '/api/product/' + Id,
                type: 'get',
                contentType: "application/json",
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.success) {
                        form.val('formAdvForm', res.data);
                        if (res.data.languageId != 0) {
                            // 获取zTree对象，可以调用zTree方法
                            if (res.data.parentId && res.data.classId != 0) {
                                treeSelect.checkNode('classTree', res.data.classId);
                            } else {
                                treeSelect.checkNode('classTree', "Language_" + res.data.languageId);
                            }
                        }
                        if (res.data.productImgs != null && res.data.productImgs.length > 0) {
                            laytpl($("#loadProduct").html()).render(res.data.productImgs, function (htmlstr) {
                                $(".photo-list ul").html(htmlstr);
                            });
                        }
                        if (res.data.isShow == 1) {
                            $("[name=isShowCheck]").prop("checked", true);
                            form.render('checkbox');
                        }
                    } else {
                        layer.msg(res.message, { icon: 2 });
                    }
                }
            })
        }
        //上传产品图片
        upload.render({
            elem: '.webuploader-pick',
            url: '/api/upload/manageUpload', //必填项
            method: 'POST',  //可选项。HTTP类型，默认post
            accept: 'image',
            multiple: true,
            size:@(AppSetting.MaxFile * 1024),
            done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                if (res.success) {
                    laytpl($("#addimg").html()).render(res.data, function (htmlstr) {
                        $(".photo-list ul").append(htmlstr);
                    });
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            }
        });
        // 点击图片放大
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            layer.photos({ photos: { data: [{ src: $(this).attr('src') }] }, shade: .1, closeBtn: true });
        });

        //设置为标题图片
        $(document).on('click', '.setTitleImg', function () {
            $(".remark").remove();
            $(".img-box").removeClass("selected");
            $("[name=isTitle]").val(0);
            var li = $(this).parent();
            var imgbox = li.find(".img-box");
            imgbox.addClass("selected");
            imgbox.append("<span class=\"remark\"><i>标题图片</i></span>");
            li.find("[name=isTitle]").val(1);
        });

        //删除图片
        $(document).on('click', ".delImg", function () {
            var obj = this;
            var src = $(obj).parent().find("[name=img]").val();
            var id = $(obj).parent().find("[name=img]").attr("data-id");
            layer.confirm('确定要删除图片吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                    layer.load(2);
                    $.ajax({
                        url: '/api/upload/DelFile',
                        type: 'delete',
                        data: { src: src },
                        dataType: "json",
                        async: true,
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (res) {
                            if (res.success) {
                                $(obj).parent().remove();
                                DelimgInDatabase(id);
                            } else {
                                layer.msg(res.message, { icon: 2 });
                            }
                        }
                    });
            });
        });

        ///删除数据库里的产品图片
        function DelimgInDatabase(id) {
            $.ajax({
                url: '/api/product/DeleteProductImg',
                type: 'delete',
                data: { id: id },
                dataType: "json",
                async: true,
                success: function (res) {
                    if (res.success) {
                    } else {
                        layer.msg(res.message, { icon: 2 });
                    }
                }
            });
        }
    });
</script>
